import * as React from "react";
import { Text, StyleSheet, View, Dimensions, Image } from "react-native";
import Swiper from "react-native-swiper";

const { width } = Dimensions.get("window");

interface Props extends React.Props<any> {
  swipeData: Array<any>;
}

export default class SwiperView extends React.Component<Props> {
  render() {
    let contents: Array<any> = [];
    this.props.swipeData.forEach((currentValue: any, index: number) => {
      let element = (
        <View style={styles.slide} key={index}>
          <Image
            source={currentValue.image}
            style={styles.image}
            resizeMode="stretch"
          />
          <Text style={styles.text}>{currentValue.text}</Text>
        </View>
      );
      contents.push(element);
    });
    return (
      <Swiper
        style={styles.wrapper}
        height={240}
        autoplay
        paginationStyle={styles.pageStyle}
        dot={<View style={styles.dotStyle} />}
        activeDot={<View style={styles.activeDotStyle} />}
      >
        {contents}
      </Swiper>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {},
  slide: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent"
  },
  text: {
    position: "absolute",
    color: "white",
    bottom: 10,
    left: 15,
    right: 60
  },
  image: {
    width: "100%",
    flex: 1,
    height: "100%"
  },
  pageStyle: {
    position: "absolute",
    right: 20,
    left: width - 60,
    bottom: 15
  },
  dotStyle: {
    width: 5,
    height: 5,
    borderRadius: 3,
    backgroundColor: "rgba(255,255,255,.5)",
    marginLeft: 3,
    marginRight: 3,
    marginTop: 3,
    marginBottom: 3
  },
  activeDotStyle: {
    backgroundColor: "white",
    width: 8,
    height: 8,
    borderRadius: 4,
    marginLeft: 3,
    marginRight: 3,
    marginTop: 2,
    marginBottom: 3
  }
});
